<script setup lang="js">
import { onMounted } from "vue";
import * as PIXI from 'pixi.js';

onMounted(() => {

    const app = new PIXI.Application({ resizeTo: window });

    document.getElementById('pixi-ParticleContainer-container').appendChild(app.view);

    const sprites = new PIXI.ParticleContainer(10000, {
        scale: true,
        position: true,
        rotation: true,
        uvs: true,
        alpha: true,
    });

    app.stage.addChild(sprites);

    // create an array to store all the sprites
    const maggots = [];

    const totalSprites = app.renderer instanceof PIXI.Renderer ? 10000 : 100;

    for (let i = 0; i < totalSprites; i++) {
        // create a new Sprite
        const dude = PIXI.Sprite.from('https://pixijs.com/assets/maggot_tiny.png');

        // set the anchor point so the texture is centerd on the sprite
        dude.anchor.set(0.5);

        // different maggots, different sizes
        dude.scale.set(0.8 + Math.random() * 0.3);

        // scatter them all
        dude.x = Math.random() * app.screen.width;
        dude.y = Math.random() * app.screen.height;

        dude.tint = Math.random() * 0x808080;

        // create a random direction in radians
        dude.direction = Math.random() * Math.PI * 2;

        // this number will be used to modify the direction of the sprite over time
        dude.turningSpeed = Math.random() - 0.8;

        // create a random speed between 0 - 2, and these maggots are slooww
        dude.speed = (2 + Math.random() * 2) * 0.2;

        dude.offset = Math.random() * 100;

        // finally we push the dude into the maggots array so it it can be easily accessed later
        maggots.push(dude);

        sprites.addChild(dude);
    }

    // create a bounding box box for the little maggots
    const dudeBoundsPadding = 100;
    const dudeBounds = new PIXI.Rectangle(
        -dudeBoundsPadding,
        -dudeBoundsPadding,
        app.screen.width + dudeBoundsPadding * 2,
        app.screen.height + dudeBoundsPadding * 2,
    );

    let tick = 0;

    app.ticker.add(() => {
        // iterate through the sprites and update their position
        for (let i = 0; i < maggots.length; i++) {
            const dude = maggots[i];

            dude.scale.y = 0.95 + Math.sin(tick + dude.offset) * 0.05;
            dude.direction += dude.turningSpeed * 0.01;
            dude.x += Math.sin(dude.direction) * (dude.speed * dude.scale.y);
            dude.y += Math.cos(dude.direction) * (dude.speed * dude.scale.y);
            dude.rotation = -dude.direction + Math.PI;

            // wrap the maggots
            if (dude.x < dudeBounds.x) {
                dude.x += dudeBounds.width;
            }
            else if (dude.x > dudeBounds.x + dudeBounds.width) {
                dude.x -= dudeBounds.width;
            }

            if (dude.y < dudeBounds.y) {
                dude.y += dudeBounds.height;
            }
            else if (dude.y > dudeBounds.y + dudeBounds.height) {
                dude.y -= dudeBounds.height;
            }
        }

        // increment the ticker
        tick += 0.1;
    });

})

</script>

<template>
    <div id="pixi-ParticleContainer-container"></div>
</template>

<style scoped></style>
